<template>
  <div class="goods-info-container">

    <!-- 加入购物车的小球动画效果,
        使用钩子函数来设置小球的半程动画效果 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag" ref="ball"></div>
    </transition>


    <!-- 轮播图的卡片视图 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <!-- 使用给轮播图组件展示轮播 -->
          <swiper :slides="slides" :attr="'src'" :is-full="false"></swiper>
        </div>
      </div>
    </div>

    <!-- 价格展示的卡片视图 -->
    <div class="mui-card">
      <div class="mui-card-header">{{ goodsInfo.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>
            市场价：<span style="margin-right: 7px;"><del>￥{{ goodsInfo.market_price }}</del></span>
            销售价：<span style="font-size: 15px; color: red; font-weight: bold">￥{{ goodsInfo.sell_price }}</span>
          </p>
          <p>
            <span>
              购买数量：
              <!-- 绑定参数: 能够达到的最大值是该商品剩余数量的值
                  当页面加载完毕后, ajax请求还没有将数据获取完毕, 所以传递的是一个空值, 会显示 undefined -->
              <num-box :max="goodsInfo.stock_quantity" @func="getChangeCount"></num-box>
            </span>
          </p>
          <div>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToCart">加入购物车</mt-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品参数的卡片视图 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ goodsInfo.goods_no }}</p>
          <p>商品情况：{{ goodsInfo.stock_quantity }}</p>
          <p>上架时间：{{ goodsInfo.add_time | dateFormat}}</p>
        </div>
      </div>
      <div class="mui-card-footer btn-area">
        <mt-button type="primary" size="large" plain @click="toDesc">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="toComment">商品评论</mt-button>
      </div>
    </div>

  </div>
</template>

<script>
/** 引入轮播图组件 **/
import Swiper from "../common/Swiper.vue";
/** 引入数字按钮的组件 **/
import NumBox from "../common/NumBox.vue";
/** 引入 vuex 中的映射 **/
import { mapMutations } from 'vuex'

export default {
  data(){
    return {
      slides: [], // 轮播图图片列表
      goodsInfo: {},  // 商品的信息
      flag: false, // 默认不显示小球
      changeCount: 1 // 购买数量的默认值为1
    }
  },
  created() {
    this.getSlideList();
    this.getGoodsInfo();
  },
  methods: {
    /** 将 vuex 中的映射方法加载进来 **/
    ...mapMutations(
        ['addToCar'] // 添加商品的方法
    ),
    /** 获取轮播图的请求 **/
    async getSlideList(){
      const { data } = await this.$http.get("/api/getthumimages/" + this.id);
      if( data.status === 0 )
        this.slides = data.message
    },
    /** 获取商品信息的请求 **/
    async getGoodsInfo(){
      const { data } = await this.$http.get("/api/goods/getinfo/" + this.id);
      if( data.status === 0 )
        this.goodsInfo = data.message[0]
    },
    /** 使用编程式路由 跳转页面到商品描述 **/
    toDesc(){
      this.$router.push('/home/goodsDesc/' + this.goodsInfo.id);
    },
    /** 使用编程式路由 跳转页面到商品评论的页面 **/
    toComment(){
      this.$router.push('/home/goodsComment/' + this.goodsInfo.id);
    },
    /** 点击`加入购物车`的事件 **/
    addToCart(){
      /* 修改小球动画的显示状态 */
      this.flag = true;
      /* 使用 vuex 中定义的方法, 将商品添加 */
      this.addToCar(
          {
                id: this.id,      // 商品的id
                count: this.changeCount,  // 选中的数量
                switch: true,   // 是否购买的开关, 默认选中
                price: this.goodsInfo.sell_price  // 商品的销售单价
              }
            );
    },
    /** 小球动画的钩子函数定义 **/
    beforeEnter(el){
      /* 设置初始位置 */
      el.style.transform = 'translate(0, 0)';
    },
    enter(el, done){
      /* 开启小球的动画效果 */
      el.offsetWidth;

      /* 动态获取小球和购物车小红点之间的距离, 修改动画的合理性 */
      const cartBall = document.getElementById("cartBall").getBoundingClientRect();
      const ball = this.$refs.ball.getBoundingClientRect();
      const x = cartBall.left - ball.left;
      const y = cartBall.top - ball.top;

      /* 设置小球的过渡和位移 */
      el.style.transform = `translate(${x}px, ${y}px)`;
      /* 使用贝尔赛曲线来改变小球的运动轨迹 */
      el.style.transition = 'all 0.6s cubic-bezier(.28,-0.51,1,.24)';
      /* 调用动画结束的方法 */
      done();
    },
    afterEnter(el){
      /* 将小球的下半场动画设置为修改显示状态 */
      this.flag = !this.flag;
    },
    /** 接收子组件传来的数据 **/
    getChangeCount(num){
      /* 如果触发了该函数那么就重新赋值 */
      this.changeCount = parseInt(num);
    }
  },
  props: ['id'],
  components: {
    Swiper,
    NumBox
  },
  computed: {}
}
</script>

<style lang="scss" scoped>
  .goods-info-container{
    // 撑开容器的大小
    padding: 1px;
    background-color: #eee;
    .btn-area{
      flex-direction: column;
      button + button{  // 使用选择器来改变第二个按钮的样式
        margin-top: 10px;
      }
    }
    // 小球的样式
    .ball{
      width: 15px;
      height: 15px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      z-index: 99; // 让小球置顶
      // 将小球定位到购买数量的数字上
      left: 153px;
      top: 372px;
    }
  }

</style>